<template>
	<view class="">
		<u-navbar title="核销套餐" :autoBack="true" bgColor="#fff" :fixed="false"></u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabsData" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
		            color: '#303133',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :scrollable="false" @change="change"
				:current="current">
			</u-tabs>
		</u-sticky>
		<view class="p-30">
			<template v-if="!noData">
				<view :class="{'mt-30':index != 0}" v-for="(item,index) in list">
					<item :item="getItem(item)" :type="2">
						<view class="item-btn" slot="btn" @click.stop="check1(item)" v-if="item.state == 0">
							立即核销
						</view>
					</item>
				</view>
			</template>
			<template v-else>
				<u-empty mode="data">
				</u-empty>
			</template>
		</view>
		<u-modal :show="modalShow" title="核销码" :closeOnClickOverlay="true" @confirm="check()">
			<view class="slot-content">
				<u--input placeholder="请输入核销码" border="surround" v-model="code"></u--input>
			</view>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		packageStaffList,
		packageCheck
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				modalShow: false,
				tabsData: [{
					name: '服务中'
				}, {
					name: '已完成'
				}],
				current: 0,

				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0,

				id: 0,
				code: '',
			}
		},
		computed: {
			...mapState(["$userInfo", "isLogin", "systemInfo", "imgData"]),
		},
		onLoad(e) {
			if (e.current) this.current = e.current

			this.init();
		},
		methods: {
			check1(item) {
				this.id = item.id;
				this.modalShow = true;
			},
			check() {
				console.log('checkcheck');
				let vm = this;
				packageCheck({
					data: {
						id: this.id,
						code: this.code
					}
				}).then(res => {
					vm.modalShow = false;
					vm.$refs.uToast.show({
						type: 'success',
						message: '核销成功',
						complete() {
							uni.hideLoading();
							vm.loading = false;
							vm.init()
						}
					})
				})
			},
			change(e) {
				console.log(e);
				this.current = e.index;
				this.init()
			},
			getItem(item) {
				return {
					tag_name: item.tag_name,
					id: item.package_id,
					name: item.package_name,
					staff_figure: item.staff.figure,
					value: item.package.value,
					staff_service_text: item.staff.service_text ? item.staff.service_text.toString() : '',
					staff_service1_text: item.staff.service1_text ? item.staff.service1_text.toString() : '',
					price: item.money,
					starttime: item.package.starttime,
					endtime: item.package.endtime,
					staff_image: item.staff.image,
					staff_id: item.staff_id
				}
			},
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.getList();
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit,
					'state': this.current
				};
				packageStaffList({
					params
				}).then(res => {
					console.log(res.length);
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}
				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>